<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>干货集锦</title>
		<script src="js/layui/layui.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/icon.css" />
		<script type="text/javascript" src="js/AppSetting.js" ></script>
		<style>
			.content {
				display: flex;
				justify-content: center;
				width: 100%;
			}
			
			.page-ul {
				background-color: #eee;
				width: 80%;
			}
			
			.page-li {
				background-color: #fff;
				padding: 1rem 2rem;
				margin: 2px 0;
				display: flex;
				justify-content: space-between;
			}
			@media screen and (max-width: 456px) {
				.li-left{
					display: none;
				}
				.li-right{
					padding: 1rem 0!important;
				}
				.page-ul{
					width:100%!important;
				}
			}
			.li-left img {
				width: 14rem;
				height: 10rem;
			}
			
			.li-right {
				padding: 1rem 2rem;
			}
			
			.li-right span {
				display: flex;
				padding: 0.6rem;
				font-weight: bold;
				font-size: 1.2rem;
				font-family: "楷体";
			}
			
			.li-right p {
				text-indent: 28px;
				line-height: 22px;
				font-size: 14px;
				color: #666;
			}
			
			.right-tooltar {
				padding: 0.4rem 0.2rem;
				text-align: right;
			}
			.iconfont{
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<!--
            	作者：1832600296@qq.com
            	时间：2018-02-25
            	描述：宣传图片
            -->
            <div class="layui-carousel" id="carousel">
				<div carousel-item>
					<img src="img/DrieadFood.jpg" />
					<!--<img src="img/2.jpg" />
					<img src="img/3.jpg" />-->
				</div>
			</div>
			<!--
            	作者：1832600296@qq.com
            	时间：2018-02-25
            	描述：内容
            -->
			<div class="content">
				<ul id="DataList" class="page-ul">
					<!--<li class="page-li">
						<div class="li-left">
							<img src="img/2.jpg" />
						</div>
						<div class="li-right">
							<span>标题</span>
							<p>今天天气很好的祭祀的罚款风格啊打飞机啊开发啊倒萨卡夫卡啊凡客大奖ask发送到附近ask</p>
							<div class="right-tooltar">
								<i class="iconfont">&#xe715; 李四 </i>
								<i class="iconfont">&#xe6e9; 2018.1.2 </i>
								<i class="iconfont">&#xe6e6; 120 </i>
							</div>
						</div>
					</li>-->
					
				</ul>
			</div>
		</div>
	</body>
</html>
<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use(['element', 'carousel'], function() {
		var element = layui.element,
			carousel = layui.carousel;

		//宣传图片
		carousel.render({
			elem: '#carousel',
			width: '100%', //设置容器宽度
			height: '220px',
			autoplay:false,
			arrow: 'none', //始终显示箭头
			indicator:'none',
			anim: 'fade', //切换动画方式
			interval: 10000 //10秒
		});
		
		BindDataList();
	});
	
	/**
     * 数据列表
     */
    function BindDataList() {
        layui.use('flow', function () {
            var flow = layui.flow;

            //流加载
            var pageSize = 15;//初始化默认显示15条
            ajaxget({
                url: 'api/BlogPublic/GetBlogFoodList',
                success: function (data) {

                    if (data == null) {
                        return;
                    }
                    var pagetotal = Math.ceil(data.length / pageSize);//总页数
                    
                    flow.load({
                        elem: '#DataList',
                        isLazyimg: true,//开启图片懒加载
                        done: function (page, next) {
                            var lis = [];
                            for (var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {
                                //组合html
                                lis.push('<li id="'+data[index].Guid+'" onclick="Clickli(this.id)" class="page-li">');
                                lis.push('<div class="li-left">');
                                if(data[index].ImageUrl!=""){
                                	lis.push('<img src="'+ApiURL+data[index].ImageUrl+'" />');
                                }
                                lis.push('</div>');
                                lis.push('<div class="li-right">');
                                lis.push('<span>'+data[index].Title+'</span>');
                                lis.push('<p>'+MyPublic.getFnDataellipsis(data[index].ContentData)+'</p>');
                                lis.push('<div class="right-tooltar">');
                                lis.push('<i class="iconfont">&#xe715; '+data[index].UserName+' </i>');
                                lis.push('<i class="iconfont">&#xe6e9; '+data[index].StrAddtime+' </i>');
                                //lis.push('<i class="iconfont">&#xe6e9; '+MyPublic.getFnDate(data[index].Addtime)+' </i>');
                                lis.push('<i class="iconfont">&#xe6e6; '+data[index].ViewNumber+' </i>');
                                lis.push('</div>');
                                lis.push('</div>');
                                lis.push('</li>');
                            }
                            
                            next(lis.join(''), page < pagetotal);
                        }
                    });

                }
            })
        });
    }
	//查看
	function Clickli(id){
		var url="DriedFoodView.html?id="+id;
		window.open(url);
	}
</script>
